<!-- 编辑 -->
<template>
  <div class="usereidt">
    <div class="login-form">
      <h2>编辑信息</h2>
      <el-form id="of" status-icon>
        <el-form-item prop="username">
          姓名：
          <el-input placeholder="姓名" v-model="useredit.username"></el-input>
        </el-form-item>
        <el-form-item prop="age">
          年龄：
          <el-input placeholder="年龄" v-model="useredit.age"></el-input>
        </el-form-item>
        <el-form-item prop="sex">
          <span>性别:&emsp;</span>
          <el-radio v-model="useredit.sex" label="男">男</el-radio>
          <el-radio v-model="useredit.sex" label="女">女</el-radio>
        </el-form-item>
        <!-- <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            :action="Setting.apiBaseUrl+'/admin/uploadimg'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="imageUrl"
              :src="Setting.baseUrl + imageUrl"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item> -->
        <el-form-item prop="is_vip">
          <span>等级:&emsp;</span>
          <el-radio v-model="useredit.is_vip" :label="0">普通用户</el-radio>
          <el-radio v-model="useredit.is_vip" :label="1">会员</el-radio>
        </el-form-item>
        <el-form-item>
          <span>身份:&emsp;</span>
          <el-radio v-model="useredit.level" label="0">管理员</el-radio>
          <el-radio v-model="useredit.level" label="1">学生</el-radio>
          <el-radio v-model="useredit.level" label="2">班主任</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="goAmend">确认修改</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Setting from "@/utils/setting.js"
import { userEditApi, userListApi } from "../../../api/users.js";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      Setting:Setting,
      imageUrl: "",
      id: "",
      useredit: {
        username: "",
        sex: "",
        age: "",
        is_vip: "",
        level: "",
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getMsg() {
      this.id = this.$route.params.id;
      console.log(this.id)
      userListApi(this.id).then(res => {
        this.useredit = res.data && res.data[0] || {}
      })
    },
    goAmend() {
      // console.log(this.useredit);
      this.$set(this.useredit, "imgsrc", this.imageUrl);
      userEditApi(this.useredit).then(() => {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.$router.push("/admin/users/list");
      });
    },
    handleAvatarSuccess(res) {
      this.imageUrl = res.data.path;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getMsg();
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less">
.usereidt {
  width: 300px;
  h2 {
    color: rgb(77, 77, 77);
    margin-bottom: 10px;
  }
}
</style>